<script lang="tsx">
import Vue from 'vue'
import { mapMutations } from 'vuex'
import { Component } from 'vue-property-decorator'

@Component({
    created () {
        this.toggleHeader(false)
    },
    methods: {
        ...mapMutations(process.env.APP_SCOPE_NAME, ['toggleHeader'])
    }
})
export default class Error extends Vue {
    render (): JSX.Element {
        return (
            <div class="mg-notFound">
                <div class="fixed-center text-center">
                    <p>
                        <img
                            src={require('@/statics/assets/sad.svg')}
                            style="width:30vw;max-width:150px;"
                        />
                    </p>
                    <p class="text-faded">Sorry, nothing here...<strong>(404)</strong></p>
                    <q-btn
                        color="secondary"
                        style="width:200px;"
                        onClick={() => this.$router.replace('/')}
                    >Go back</q-btn>
                </div>
            </div>
        )
    }
}
</script>

